<template>
  <div class="app-container">
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="i" label="序号" width="80">
      </el-table-column>
      <el-table-column prop="username" label="用户名">
      </el-table-column>
      <el-table-column prop="userBirthDay" label="出生日期">
      </el-table-column>
      <el-table-column prop="userGender" label="性别">
        <template slot-scope="scope">
          {{ scope.row.userGender ? '女' : '男' }}
        </template>
      </el-table-column>
      <el-table-column prop="userImageAddress" label="头像">
        <template slot-scope="scope">
          <el-avatar shape="square" size="medium" :src="scope.row.userImageAddress"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" v-if="scope.row.userStatus == 1" type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
          <el-button size="mini" v-else type="primary" @click="handleDelete(scope.row)">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="dialogData" label-width="80px" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="dialogData.username" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="userBirthDay">
          <el-date-picker v-model="dialogData.userBirthDay" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="性别" prop="userGender">
          <el-radio v-model="dialogData.userGender" :label="0">男</el-radio>
          <el-radio v-model="dialogData.userGender" :label="1">女</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeUserInfo">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除" :visible.sync="deleted" width="40%">
      <span>确定删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleted = false">取 消</el-button>
        <el-button type="primary" @click="removeUserInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { change, userAllInfo, stopUser } from '@/api/user';
export default {
  data() {
    return {
      userInfo: undefined,
      tableData: undefined,
      loading: false,
      dialogVisible: false,
      deleted: false,
      dialogData: {
        username: undefined,
        userBirthDay: undefined,
        userGender: undefined
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        userBirthDay: [
          { required: true, message: '请选择出生日期', trigger: 'blur' }
        ],
        userGender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.userInfo = this.$store.getters.token
    this.getTable()
  },
  methods: {
    getTable() {
      const data = {
        userId: this.$store.getters.token.userId
      }
      userAllInfo(data).then(res => {
        let i = 1
        this.tableData = res.data.map(item => {
          item.i = i++
          return item
        })
      })
    },
    changeUserInfo() {
      this.$refs.form.validate(valid => {
        const data = {
          ...this.dialogData,
          userId: this.userInfo.userId
        }
        if (valid) {
          change(data).then(res => {
            this.$message(res.errorMessage)
            this.dialogVisible = false
            this.getTable()
          })
        }
      })
    },
    removeUserInfo() {
      const data = {
        userId: this.dialogData.id,
        userStatus: this.dialogData.userStatus == 1 ? 2 : 1
      }
      console.log(this.dialogData)
      stopUser(data).then(res => {
        this.$message(res.errorMessage)
        this.getTable()
        this.deleted = false
      })
    },
    handleEdit(value) {
      this.dialogVisible = true
      this.dialogData = structuredClone(value)
    },
    handleDelete(value) {
      this.deleted = true
      this.dialogData = structuredClone(value)
    }
  }
}
</script>
